<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <input type="text" placeholder="请输入搜索名称" v-model="inputValue" @input="search">
        <ul>
            <li v-for="item in nowList" :key="item.id">
                {{item.id}} --- {{item.name}} --- {{item.age}}
            </li>
        </ul>
        <div>
            <button @click="ageSort('asc')">年龄升序</button>
            <button @click="ageSort('des')">年龄降序</button>
            <button @click="search">原本顺序</button>
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: '#root',
            data: {
                list: [
                { id: 1, name: 'jack', age: 22 },
                { id: 2, name: 'rose', age: 18 },
                { id: 3, name: 'tom', age: 20 },
                { id: 4, name: 'jerry', age: 16 },
                { id: 5, name: 'marry', age: 28 },
                { id: 6, name: 'jim', age: 19 },
                { id: 7, name: 'mike', age: 21 },
                ],
                inputValue: '',
                nowList: [
                { id: 1, name: 'jack', age: 22 },
                { id: 2, name: 'rose', age: 18 },
                { id: 3, name: 'tom', age: 20 },
                { id: 4, name: 'jerry', age: 16 },
                { id: 5, name: 'marry', age: 28 },
                { id: 6, name: 'jim', age: 19 },
                { id: 7, name: 'mike', age: 21 },
                ]
            },
            methods: {
                search(){
                    const value = this.inputValue.trim();
                    if(value === ''){
                        this.nowList = this.list;
                    }else{
                        this.nowList = this.list.filter((item) => {
                            return item.name.indexOf(value) != -1; 
                        })
                    }  
                },
                ageSort(value){
                    let arr = [];
                    this.nowList.forEach((item) => {
                        arr.push(item)
                    })
                    let num = 0;
                    for(let i = 0; i < arr.length; i++){
                        for(let j = i + 1; j < arr.length; j++){
                            // 根据传来的数据判断升序降序改变if里面的表达式
                            if(value === 'asc' ? arr[i].age > arr[j].age : arr[i].age < arr[j].age){
                                num = arr[i];
                                arr[i] = arr[j];
                                arr[j] = num;
                            }
                        }
                    }
                    this.nowList = arr;
                },
            }
        })
    </script>
</body>
</html>